[Apple Watch アプリ開発] #2 ラベル

WKInterfaceLabel

概要

Apple Watch アプリで UI を構築するときはWatchKitという iOS のフレームワークを利用します。 UIKit は使えません。

WatchKit には以下のクラスが含まれます。

• WKDefines
• WKError
• WKInterfaceButton
• WKInterfaceController
• WKInterfaceDate
• WKInterfaceDevice
• WKInterfaceGroup
• WKInterfaceImage
• WKInterfaceLabel
• WKInterfaceMap
• WKInterfaceObject
• WKInterfaceSeparator
• WKInterfaceSlider
• WKInterfaceSwitch
• WKInterfaceTable
• WKInterfaceTimer

これらのクラスはすべてWKというプレフィックスから始まります。 WatchKit の頭文字を取って WK となっているのでしょう。 （WebKit も WK だったんですけどねぇ）

今回はラベルを表現するクラスWKInterfaceLabelについて調べていきます。 自分はこのクラスは UIKit のUILabelに相当するクラスであると考えています。

※日時ラベルを表現するWKInterfaceDate, タイマーラベルを表現するWKInterfaceTimerも存在しますが、これらはまたそのうち。

特性

ラベルは以下の特性を持ちます。

• 任意の量の静的なテキストを表示できる
• ユーザーの直接的な操作を許可しない
• プログラムで更新することができる
• 複数行にまたがることができる

また、Apple はラベルを使用するときは以下のことを推奨しています。

• ユーザーに短いメッセージを表示するためには、ラベルを使用してください
• ラベルは読みやすくしてください
• 可能な限り、組み込みのstyleを使用してください

ラベルはメッセージを表示するために使うこと、適切な見た目で使用することなど。 見づらい色だったり、文字が大きすぎたり小さすぎたりするのもダメなようですね。 推奨されているということは、裏を返せばこれに反するアプリを作成した場合リジェクト対象になる可能性があるのでご注意ください。

Text Styles

上記で書かれているstyleですが、iOS に組み込まれているものは今のところ以下の6 種類です。

• Body (Default)
• Caption 1
• Caption 2
• Footnote
• Headline
• Subhead

これらのスタイルは iOS のDinamic Type（設定アプリからフォントサイズを変えるやつ）にも対応しています。

では実際に Xcode で、ラベルやスタイルを表示してみましょう。

ラベルの表示

ラベルを画面に貼り付ける

右下のペインからLabelを画面に持って行くと、自動的に配置が決定されます。 Apple Watch アプリではAutolayout は利用できないようです。

画面はこちら

Text Styles

テキストのスタイルは右上のペインにあるFontから選ぶことができます。

こんな見た目です

画面のスクロール

画面に要素が増えた時は自動でスクロールができるようになります。 UIScrollView のような親ビューの配置は不要です。

プログラムで操作する

今度はコードからラベルを操作してみましょう。

はじめに、WKInterfaceLabelの定義を見てみましょう。

@availability(iOS, introduced=8.2)
class WKInterfaceLabel : WKInterfaceObject {

func setText(text: String?)
func setTextColor(color: UIColor?)

func setAttributedText(attributedText: NSAttributedString?)
}

メソッドが 3 つしかありません。 少ないですね。 できることはテキストを設定したり、色や属性を変えたりとその程度のようです。 ではやってみましょう。

準備

書く

override func awakeWithContext(context: AnyObject?) {
super.awakeWithContext(context)

self.label.setText("Hello.")
}

できた

書く

override func awakeWithContext(context: AnyObject?) {
super.awakeWithContext(context)

self.label.setText("Hello.")
self.label.setTextColor(UIColor.greenColor())
}

できた

書く

override func awakeWithContext(context: AnyObject?) {
super.awakeWithContext(context)

let attributes = [NSForegroundColorAttributeName: UIColor.redColor(), NSBackgroundColorAttributeName: UIColor.blueColor(), NSKernAttributeName: 8]
let attributedString = NSAttributedString(string: "Hello.", attributes: attributes)
self.label.setAttributedText(attributedString)
}

できた

まとめ

以上がWKInterfaceLabelの説明でした。

プログラムでできることは以下の通りです。

• テキストの設定
• テキストカラーの設定
• 属性付きテキストの設定

引き続き他のクラスについても調査していきたいと思います。

ではまた。

リンク

• WatchKit Framework Reference
• Labels